<!DOCTYPE html>
<html>
<head>
	<title>omg.js | Z-index</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#canvas {
			margin: 0;
			background-color: #ccc;
		}

	</style>
</head>
<body>
<div id="fps"></div>
<div class="container">
		<canvas id="canvas"></canvas>
</div>
<script src="./omg.min.js"></script>
<script>
	var stage = omg({
		element: document.getElementById('canvas'),
		width: 500,
		height: 500,
		enableGlobalTranslate: true
	});

	stage.init();

	function createRect(x, y, width, height, zindex) {
		return stage.graphs.rectangle({
				x: x,
				y: y,
				width: width,
				height: height,
				zindex: zindex,
				color: '#'+(~~(Math.random()*(1<<24))).toString(16)
			}).config({
				drag: true
			});
	}	

	var rect1 = createRect(0, 0, 50, 50, 4);
	var rect2 = createRect(30, 30, 80, 80, 2);
	var rect3 = createRect(20, 20, 60, 60, 1);
	var rect4 = createRect(80, 80, 60, 60, 2);

	stage.addChild([rect1, rect2, rect3, rect4]);

	stage.show();

</script>
</body>
</html>